<!--
 * @Author: your name
 * @Date: 2022-04-01 10:38:07
 * @LastEditTime: 2024-03-19 09:45:53
 * @LastEditors: wanghao xh-pc@DESKTOP-CVB101Q
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \mrp2-web\src\views\login\index.vue
-->
<!--  -->
<template>
  <div class="bg relative backgroundImg">
    <svg
      class="circle1"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      width="800px"
      height="800px"
    >
      <g transform="matrix(1 0 0 1 -561 -139 )">
        <path
          d="M 961 139  C 1185 139  1361 315  1361 539  C 1361 763  1185 939  961 939  C 737 939  561 763  561 539  C 561 315  737 139  961 139  Z "
          fill-rule="nonzero"
          fill="#bd9e55"
          stroke="none"
          fill-opacity="0.3058823529411765"
        />
      </g>
    </svg>
    <svg
      class="circle1"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      width="685px"
      height="685px"
    >
      <g transform="matrix(1 0 0 1 -627 -200 )">
        <path
          d="M 969.5 200  C 1161.3000000000002 200  1312 350.7  1312 542.5  C 1312 734.3000000000001  1161.3000000000002 885  969.5 885  C 777.7 885  627 734.3000000000001  627 542.5  C 627 350.7  777.7 200  969.5 200  Z "
          fill-rule="nonzero"
          fill="#ffffff"
          stroke="none"
          fill-opacity="0.7529411764705882"
        />
      </g>
    </svg>
    <svg
      class="circle1"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      width="565px"
      height="565px"
    >
      <g transform="matrix(1 0 0 1 -687 -260 )">
        <path
          d="M 969.5 260  C 1127.7 260  1252 384.29999999999995  1252 542.5  C 1252 700.7  1127.7 825  969.5 825  C 811.3 825  687 700.7  687 542.5  C 687 384.29999999999995  811.3 260  969.5 260  Z "
          fill-rule="nonzero"
          fill="#ffffff"
          stroke="none"
          fill-opacity="0.6039215686274509"
        />
      </g>
    </svg>
    <div class="login-content">
      <img class="logo" :src="config.img.logoImg.base64" alt="" />
      <p class="title mt-[10px] mb-[30px]">{{ config?.text.name }}</p>
      <a-form
        :model="formState"
        name="normal_login"
        class="login-form"
        @finish="onFinish"
        @finish-failed="onFinishFailed"
      >
        <a-form-item label="" name="username" :rules="[{ required: true, message: '请输入账号！' }]">
          <a-input v-model:value="formState.username" placeholder="请输入登录账号">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" style="color: #d1bc89" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item label="" name="password" :rules="[{ required: true, message: '请输入密码！' }]">
          <a-input-password v-model:value="formState.password" placeholder="请输入登录密码">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" style="color: #d1bc89" />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item>
          <a-button
            html-type="submit"
            :disabled="disabled || logining"
            class="login-form-button mediumTitleTS"
            :class="!disabled && logining ? 'disabled-login-form-button' : ''"
          >
            登录
          </a-button>
        </a-form-item>
        <div class="login-form-wrap">
          <!-- <a-form-item name="remember" no-style>
                    <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
                </a-form-item> -->
          <a class="login-form-forgot clickTC float-right" href="">忘记密码？</a>
        </div>
      </a-form>
    </div>
  </div>

  <Tx-Sider
    ref="TSider"
    setofbooks-show
    :is-systems="isSystems"
    :is-modules="isModules"
    :menu-title="menuTitle"
    @router-replace="routerReplace"
    @router-push="routerPush"
    @change-system-or-module="changeSystemOrModule"
  />
</template>

<script lang="ts">
import { computed, onBeforeMount, onMounted, reactive, ref } from 'vue'
import { LockOutlined, UserOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { getUCConfig } from 'uc-npm'
import { currentpermissions, getToken, getUserInfo } from '../../api/modules/login/login'
import { encrypt } from '../../utils/crypto'
interface FormState {
  username: string
  password: string
  remember: boolean
}
export default {
  name: '',
  components: {
    UserOutlined,
    LockOutlined
  },
  setup() {
    const router = useRouter()
    const logining = ref<any>(false)
    const moduleVisible = ref(false)
    const TSider = ref<any>() // 获取子组件所有属性及方法
    const isSystems = ref<any>('BasisSystem')
    const isModules = ref<any>(JSON.parse(localStorage.getItem('selectModule') || '{}').key || '')
    const menuTitle = ref<any>(JSON.parse(localStorage.getItem('selectModule') || '{}').title || '')
    onBeforeMount(() => {})
    onMounted(() => {})
    const formState = reactive<FormState>({
      username: '',
      password: '',
      remember: true
    })
    const routerReplace = url => {
      router.replace(url)
    }
    const routerPush = url => {
      router.push(url)
    }
    const changeSystemOrModule = () => {
      // localStorage.setItem("isModules",key)
      // localStorage.setItem("menuTitle",name)
      // isModules.value = key
      // menuTitle.value = name
      menuTitle.value = JSON.parse(localStorage.getItem('selectModule') || '{}').title || ''
    }
    async function getUserInfoApi() {
      const userInfos = await getUserInfo()
      localStorage.setItem('userInfos', JSON.stringify(userInfos))
    }
    const onFinish = () => {
      logining.value = true
      getToken({
        password: formState.password,
        userName: formState.username,
        clientId: 'admin-client-demo',
        clientSecret: '1q2w3e*',
        remember: true,
        mode: 'none'
      })
        .then(async res => {
          // store.state.token = res.token;
          // store.dispatch('setToken', res.access_token);
          localStorage.setItem('token', res.access_token)
          localStorage.setItem('refresh_token', res.refresh_token)
          localStorage.setItem(
            'loginForm',
            encrypt(
              JSON.stringify({
                password: formState.password,
                username: formState.username
              })
            )
          )
          if (res.access_token) {
            getUserInfoApi()
            const res = await currentpermissions({
              islogin: process.env.NODE_ENV == 'development' ? undefined : true
            })
            localStorage.setItem('AccessData', JSON.stringify(res.groups))
            // moduleVisible.value = true
            TSider.value.oneModule()
            // console.log( TSider.value.clickModuleVisible(),'-------------调用子组件选择模块方法')
          }
          logining.value = false
        })
        .catch(() => {
          logining.value = false
        })
    }

    const onFinishFailed = () => {}
    const disabled = computed(() => {
      return !(formState.username && formState.password)
    })

    return {
      formState,
      onFinish,
      onFinishFailed,
      disabled,
      moduleVisible,
      TSider,
      routerReplace,
      routerPush,
      changeSystemOrModule,
      isSystems,
      isModules,
      menuTitle,
      config: getUCConfig()
    }
  }
}
</script>
<style lang="scss" scoped>
.modal_item_border {
  margin: 55px;
  border: 1px solid rgb(238, 250, 255);
  border-radius: 10px;
  box-shadow: rgb(0 0 0 / 10%) 0px 0px 12px;
}
.bg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  // background: url("../../assets/login-bg.jpg") no-repeat;
  background-repeat: no-repeat;
  // background: url("../../assets/login-bg.jpg") no-repeat;
  .circle1 {
    position: absolute;
  }
  .circle2 {
    position: absolute;
  }
  .circle3 {
    position: absolute;
  }
  .login-content {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    .logo {
      width: 335px;
      height: 52px;
    }
    .title {
      font-size: 28px;
      color: #01315e;
    }
  }
  :deep(.ant-input-affix-wrapper) {
    width: 300px;
    height: 44px;
    color: rgba(153, 153, 153, 0.8352941176470589);
    border-radius: 20px;
    border-color: rgba(189, 158, 85, 1);
  }
  .login-form-button {
    width: 300px;
    height: 40px;
    border-radius: 20px;
    background-color: rgba(0, 106, 178, 1);
    font-size: 20px;
    line-height: 25px;
    color: #fff;
  }
  .disabled-login-form-button {
    background-color: #ccc;
  }
  :deep(.ant-form-item-control-input-content) {
    margin: 5px 0;
  }
}
.backgroundImg {
  background: url('../../assets/login-bg.jpg') no-repeat;
  background-size: cover;
}
.rt {
  border-radius: 10px;
}
.yuan {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #006ab2;
}
.weight600 {
  font-weight: 600;
}
:deep(.ant-input-affix-wrapper > input.ant-input) {
  min-height: 42px !important;
}
:deep(.ant-btn) {
  height: 35px !important;
}
</style>
